<template>
  <el-dialog v-model="dialogVisible" width="500" :before-close="onCancel">
    <slot></slot>
    <template #footer>
      <div class="flex gap-x-4 justify-end">
        <cl-button @click="onCancel">取消</cl-button>
        <cl-button type="primary" @click="onConfirm"> 确定 </cl-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
interface DialogParams {
  onConfirm?: () => void;
  onCancel?: () => void;
}
const dialogVisible = ref(false);
let dialogFunction: DialogParams = {};
function openDialog(dialogParams: DialogParams) {
  dialogVisible.value = true;
  dialogFunction = dialogParams;
}

function closeDialog() {
  dialogVisible.value = false;
}

function onCancel() {
  closeDialog();
  dialogFunction.onCancel?.();
}

function onConfirm() {
  dialogFunction.onConfirm?.();
}

defineExpose({
  openDialog,
  closeDialog,
});
</script>

<style scoped lang="scss"></style>
